<template>
	<view class="c-detail">
		<view class="order">
			<text>第{{chaptdetail.order}}章 </text>
			<text>{{chaptdetail.title}}</text>
		</view>
		<view class="item" v-for="(item,index) in chaptdetail.body" :key="index">
			{{item.data}}
		</view>
		<view class="bottom">
			<view class="left" @tap="forward(chaptdetail.order)">
				<image src="/static/images/icon/forward_page.png" mode="aspectFill"></image>
				<view class="tip">
					上一章
				</view>
			</view>
			<view class="center" @tap="directory('/pages/post/comps/novchapters/chapterList?nid=' + nov_id + '&action_nov_chapter=' +action_nov_chapter)">
				<image src="/static/images/icon/directory.png" mode="aspectFill"></image>
				<view class="tip">
					目录
				</view>
			</view>
			<view class="right" @tap="next(chaptdetail.order)">
				<view class="tip">
					下一章
				</view>
				<image src="/static/images/icon/next_page.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../../common/api.js'
	export default {
		data() {
			return {
				nov_id:'',		//小说id
				chaptid:'',		//章节id
				action_nov_chapter:'', 	//是否显示对小说章节进行删除，修改等操作
				chaptdetail:[]	//章节详情页信息
			}
		},
		async onLoad(p) {
			console.log(p);
			this.chaptid = p.cid
			this.nov_id = p.nov_id
			this.chaptdetail = await api.GetChapterDetail(this.chaptid)
			console.log(this.chaptid,this.nov_id);
		},
		methods:{
			
			async forward(chapter_order) {//获取小说上一章节详情
				let res = await api.GetForwardChapterDetail(this.nov_id,chapter_order)
				if(res.err !== 1) {
					this.chaptdetail = res
				}else {
					uni.showToast({
						title:res.msg,
						duration:800,
						icon:'none'
					})
				}
			},
			
			async next(chapter_order) {//获取小说下一章节详情
				let res = await api.GetNextChapterDetail(this.nov_id,chapter_order)
				if(res.err !== 1) {
					this.chaptdetail = res
				}else {
					uni.showToast({
						title:res.msg,
						duration:800,
						icon:'none'
					})
				}
			},
			
			directory(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color:#efefef;
}
.c-detail {
	padding: 20rpx;
	padding-bottom: 80rpx;
	.order {
		
		font-size: 38rpx;
		font-weight: 600;
		padding: 24rpx;
		text:nth-child(1) {
			margin-right: 30rpx;
		}
	}
	.item {
		text-indent: 64rpx;
		padding: 10rpx 0;
	}
}
.bottom {
	display: flex;
	position: fixed;
	bottom: 0;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
	height: 120rpx;
	color: #3d3d3d;
	background-color: #efefef;
	.left,.center,.right {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 90rpx;
		border-radius: 10rpx;
		background-color: #efefef;
		border: 1rpx solid #cccbc6;
		color: #3d3d3d;
		image {
			width: 22rpx;
			height: 25rpx;
			margin-right: 10rpx;
			margin-top: 6rpx;
		}
	}
	.right {
		image {
			margin-left: 10rpx;
		}
	}
}
</style>
